<template>
  <div ref="basicMapbox" class="myMap">
    <!-- <div id="elements"></div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'pk.eyJ1IjoieGlhb3NoaWhkIiwiYSI6ImNrNngzYnRhdzBqNm0zZnJ4eWZjdndrYzkifQ.qQjf8zANr9PsMpwq2NsRWQ';

let map: any

const basicMapbox = ref()

const init = () => {
  mapboxgl.accessToken = 'pk.eyJ1IjoieGlhb3NoaWhkIiwiYSI6ImNrNngzYnRhdzBqNm0zZnJ4eWZjdndrYzkifQ.qQjf8zANr9PsMpwq2NsRWQ';
  map = new mapboxgl.Map({
    container: basicMapbox.value,
    style: 'mapbox://styles/mapbox/satellite-streets-v12',
    center: [-2.81361, 36.77271],
    zoom: 13 // starting zoom
  })
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.myMap {
  width: 100%;
  height: 100%;
}
</style>